<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>二维码生成</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .folder {
            font-weight: bold;
            color: #2a5db0;
            cursor: pointer;
        }

        .file {
            color: #333;
            cursor: pointer;
        }

        .apk {
            color: #008000;
        }

        .qr {
            display: inline-block;
            vertical-align: middle;
            margin-left: 20px;
        }
        li {
            list-style: none;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        input {
            width: 80vw;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <h2>二维码生成</h2>
    <div id="path"></div>
    <div>
        <input id="in_dir" type="text"> <button id="btn_search" onclick="search()">搜索</button>
    </div>
    <ul id="file-list"></ul>
    <script>
        let currentDir = '.';
        function search() {
            const in_dir = document.getElementById('in_dir').value;
            if (in_dir == '') {
                alert('请输入路径');
                return;   
            }
            loadDir(in_dir);
        }
        function loadDir(dir, parent_path) {
            let url = '/api/list?';
            if (parent_path) {
                console.log('parent_path 1 :', parent_path);
                let ss = parent_path.split('/');
                ss.pop();
                parent_path = ss.join('/');
                console.log('parent_path 2 :', parent_path);
                url += `dir=${encodeURIComponent(parent_path)}`;
            } else {
                url += `dir=${encodeURIComponent(dir)}`;
            }
            // fetch(`/api/list?dir=${encodeURIComponent(dir)}&parent_path=${encodeURIComponent(parent_path)}`)
            fetch(url)
                .then(res => res.json())
                .then(data => {
                    currentDir = dir;
                    document.getElementById('path').innerText = '当前路径: ' + data.parent_path;
                    const ul = document.getElementById('file-list');
                    ul.innerHTML = '';
                    if (data.parent_path != '.' && data.parent_path != '') {
                        const li = document.createElement('li');
                        li.innerHTML = `<span class='folder'>⬅️ 返回上一级</span>`;
                        li.onclick = () => loadDir('last', data.parent_path);
                        ul.appendChild(li);
                    }
                    data.list.forEach(entry => {
                        const li = document.createElement('li');
                        if (entry.is_dir) {
                            li.innerHTML = `<span class='folder'>📁 ${entry.name}</span>`;
                            li.onclick = () => loadDir(entry.full_path);
                        } else {
                            // if (entry.name.endsWith('.apk')) {
                            //     const qrId = `qr-${dir.replace(/[^a-zA-Z0-9]/g, '_')}-${entry.name}`;
                            //     li.innerHTML = `<span class='file apk'>${entry.name}</span> <span class='qr' id='${qrId}'></span>`;
                            //     li.onclick = () => showQr(dir, entry.full_path, qrId);
                            // } else {
                            //     li.innerHTML = `<span class='file'>${entry.name}</span>`;
                            // }
                            const qrId = `qr-${dir.replace(/[^a-zA-Z0-9]/g, '_')}-${entry.name}`;
                            li.innerHTML = `<span class='file apk'>${entry.name}</span> <span class='qr' id='${qrId}'></span>`;
                            li.onclick = () => showQr(dir, entry.full_path, qrId);
                        }
                        ul.appendChild(li);
                    });
                });
        }
        function showQr(dir, file, qrId) {
            const qrSpan = document.getElementById(qrId);
            qrSpan.innerHTML = `<img src='/api/qr?path=${encodeURIComponent(file)}' alt='二维码' width='300'/>`;
        }
        loadDir(currentDir);
    </script>
</body>

</html>